<template>
    <el-dialog title="采购明细" :visible.sync="open" width="80%" v-dialogDrag :append-to-body="true" @close="handleClose">
        <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
            <el-tab-pane label="采购明细" name="purchase">
                <el-card class="box-card">
                    <el-descriptions class="margin-top " :contentStyle="CS" :label-style="LS" title="" :column="3"
                        size="medium" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-c-scale-to-original"></i>
                                采购单号
                            </template>
                            {{ purchaseForm.nos }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                采购日期
                            </template>
                            <span>{{ parseTime(purchaseForm.ddDate, '{y}-{m}-{d}') }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                订单金额
                            </template>
                            <span>{{ purchaseForm.money }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                定金
                            </template>
                            <span>{{ purchaseForm.dingjin }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                已付款
                            </template>
                            <span>{{ purchaseForm.fukuan }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                剩余欠款
                            </template>
                            <span>{{ purchaseForm.shengyu }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                供应商名称
                            </template>
                            {{ purchaseForm.supplierName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-money"></i>
                                银行名称
                            </template>
                            {{ purchaseForm.bankName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-c-scale-to-original"></i>
                                银行行号
                            </template>
                            {{ purchaseForm.bankNo }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-bank-card"></i>
                                银行账号
                            </template>
                            {{ purchaseForm.accountNo }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-bank-card"></i>
                                制单人
                            </template>
                            {{ purchaseForm.createBy }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <el-table :data="purchaseDataList" ref="table" show-summary :summary-method="getSummaries">
                    <el-table-column label="序号" type="index" align="center" width="50" fixed="left" />
                    <el-table-column label="请购单号" align="center" prop="nos" />
                    <el-table-column label="订单单号" align="center" prop="projectNo" />
                    <el-table-column label="工程名称" align="center" prop="gongchengName" show-overflow-tooltip />
                    <el-table-column label="客户名称" align="center" prop="customerName" show-overflow-tooltip />
                    <el-table-column label="供应商" align="center" prop="supplierName" show-overflow-tooltip />
                    <el-table-column label="产品编码" align="center" prop="goodsCode" />
                    <el-table-column label="产品名称" align="center" prop="goodsName" />
                    <el-table-column label="产品型号" align="center" prop="goodModel" />
                    <el-table-column label="产品类型" align="center" prop="type" />
                    <el-table-column label="采购单价" align="center" prop="goodsBuyPrice" />
                    <el-table-column label="采购数量" align="center" prop="shengyu" />
                    <el-table-column label="到货状态" align="center" prop="daohuoStatus">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.daohuo_status" :value="scope.row.daohuoStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column label="到货数量" align="center" prop="daohuoCount" />
                    <el-table-column label="剩余到货" align="center" prop="shengyuDaohuoCount" />
                    <el-table-column label="到货重量" align="center" prop="daohuoDun" />
                    <el-table-column label="剩余到货重量" align="center" prop="shengyuDaohuoDun" />
                    <el-table-column label="采购总价" align="center" prop="goodsBuyTotal" />
                    <el-table-column label="重量" align="center" prop="dun" />
                    <el-table-column label="申请剩余" align="center" prop="dun" />
                    <el-table-column label="申请金额" align="center" prop="applyMoney" />
                    <el-table-column label="申请剩余" align="center" prop="applyRemain" />
                    <el-table-column label="备注" align="center" prop="remark" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="入库信息" name="inbound">
                <el-card class="box-card">
                    <el-descriptions class="margin-top " :contentStyle="CS" :label-style="LS" title="" :column="3"
                        size="medium" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-c-scale-to-original"></i>
                                入库单号
                            </template>
                            {{ purchaseForm.nos }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-c-scale-to-original"></i>
                                到货单号
                            </template>
                            {{ purchaseForm.daohuoNos }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                出/入库日期
                            </template>
                            <span>{{ parseTime(purchaseForm.rukuDate, '{y}-{m}-{d}') }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                出/入库人
                            </template>
                            <span>{{ purchaseForm.rukupeople }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                供应商名称
                            </template>
                            <span>{{ purchaseForm.supplierName }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                收货人
                            </template>
                            <span>{{ purchaseForm.shourenName }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                质检人
                            </template>
                            <span>{{ purchaseForm.zhijianName }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                制单人
                            </template>
                            {{ purchaseForm.createBy }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-money"></i>
                                采购人
                            </template>
                            {{ purchaseForm.lvBuycreateUsername }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-c-scale-to-original"></i>
                                出库/入库
                            </template>
                            <dict-tag :options="dict.type.churuku_type" :value="purchaseForm.type" />
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-bank-card"></i>
                                入库来源
                            </template>
                            <dict-tag :options="dict.type.ruku_source" :value="purchaseForm.source" />
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-bank-card"></i>
                                备注
                            </template>
                            {{ purchaseForm.createBy }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <el-table border v-loading="loading" :data="inboundDataList">
                    <el-table-column sortable label="入库单号" align="center" prop="nos" />
                    <el-table-column sortable label="订单编号" align="center" prop="projectNo" />
                    <el-table-column sortable label="产品编码" align="center" prop="params.goodsCode" />
                    <el-table-column sortable label="产品名称" align="center" prop="params.goodsName" />
                    <el-table-column sortable label="产品型号" align="center" prop="params.goodsModel" />
                    <el-table-column sortable label="产品数量" align="center" prop="daohuoCount" />
                    <el-table-column label="重量" align="center" prop="dun" />
                    <el-table-column label="单价" align="center" prop="goodsBuyPrice" />
                    <el-table-column label="总价" align="center" prop="goodsBuyTotal" />
                    <el-table-column sortable label="单位" align="center" prop="unit" />
                    <el-table-column sortable label="客户名称" align="center" prop="customerName" show-overflow-tooltip />
                    <el-table-column sortable label="销售人姓名" align="center" prop="saleName" />
                    <el-table-column sortable label="质检人" align="center" prop="zhijianName" />
                    <el-table-column sortable label="质检时间" align="center" prop="zhijianDate" />
                    <el-table-column sortable label="出入库类型" align="center" prop="type">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.churuku_type" :value="scope.row.type" />
                        </template>
                    </el-table-column>
                    <el-table-column sortable label="是否自制" align="center" prop="isdo">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.isdo" :value="scope.row.isdo" />
                        </template>
                    </el-table-column>
                    <el-table-column sortable label="入库日期" align="center" prop="rukudate" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.rukudate, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column sortable label="入库人" align="center" prop="rukuren" />
                    <el-table-column sortable label="操作工" align="center" prop="douser" show-overflow-tooltip />
                    <el-table-column sortable label="自制产品备注" align="center" prop="doremark" show-overflow-tooltip />
                    <el-table-column sortable label="其他备注" align="center" prop="remark" show-overflow-tooltip />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="开票信息" name="invoice">
                <el-table :data="invoiceList" border style="width: 100%">
                    <el-table-column sortable label="开票人" align="center" prop="invoiceUser" show-overflow-tooltip />
                    <el-table-column sortable label="开票时间" align="center" prop="invoiceTime" show-overflow-tooltip />
                    <el-table-column sortable label="开票金额" align="center" prop="invoiceMoney" show-/>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="付款信息" name="payment">
                <el-table border v-loading="loading" :data="paymentDataList" ref="table" show-summary
                    :summary-method="getSummaries">
                    <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
                    <el-table-column sortable label="申请单号 " align="center" prop="nos" width="120" :resizable="true" />
                    <el-table-column sortable label="制单人 " align="center" prop="createBy" width="120"
                        :resizable="true" />
                    <el-table-column sortable label="审计人 " align="center" prop="auditBy" width="120"
                        :resizable="true" />
                    <el-table-column label="采购单号 " align="center" prop="buyNos" width="120" show-overflow-tooltip
                        :resizable="true" />
                    <el-table-column sortable label="申请时间" align="center" prop="applyTime" width="150"
                        :resizable="true">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.applyTime, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="供应商名称" align="center" prop="goodsSupplier.name" width="230"
                        :resizable="true" />
                    <el-table-column label="人员姓名" align="center" prop="personName" :resizable="true" />
                    <el-table-column align="center" label="付款类别" prop="type">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.pay_apply_type" :value="scope.row.type" />
                        </template>
                    </el-table-column>
                    <el-table-column sortable label="发票编号" align="center" prop="invoiceCode" show-overflow-tooltip
                        :resizable="true" />
                    <el-table-column label="申请付款金额" align="center" prop="totalMoney" :resizable="true" />
                    <el-table-column label="已付金额" align="center" prop="paidMoney" :resizable="true" />
                    <el-table-column label="剩余金额" align="center" prop="remainMoney" :resizable="true" />
                    <el-table-column align="center" label="审核状态" prop="assessStatus">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.apply_assess_status" :value="scope.row.assessStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="付款状态" prop="payStatus">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.apply_pay_status" :value="scope.row.payStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding" width="300" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-document" v-if="scope.row.type !== '4'"
                                @click="handleDetail(scope.row)" v-hasPermi="['develop:PayApply:edit']">详情
                            </el-button>
                            <el-button size="mini" type="text" icon="el-icon-document" v-if="scope.row.type === '4'"
                                @click="handleDetailForShipping(scope.row)" v-hasPermi="['develop:PayApply:edit']">详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <pay-apply-detail ref="payApplyDetail"></pay-apply-detail>
        <pay-apply-shipping-detail ref="payApplyShippingDetail"></pay-apply-shipping-detail>
    </el-dialog>
</template>

<script>
import {
    accAdd,
    deleteAction, downloadFile,
    getAction, getById
} from '@/api/manage'
import PayApplyDetail from "@/views/develop/payApply/module/PayApplyDetail.vue";
import PayApplyShippingDetail from "@/views/develop/payApply/module/PayApplyShippingDetail.vue";
export default {
    name: "PurchaseDetailsFormList",
    dicts: ["apply_pay_status", "apply_assess_status", "goods_status", "daohuo_status", "churuku_type", "storage_state", "pay_apply_type"],
    components: {
        PayApplyShippingDetail,
        PayApplyDetail
    },
    props: {
        applyId: {
            type: String,
            default: "",
        },
    },
    watch: {
        applyId: {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.getApplyInfo();
                }
            },
            immediate: true
        },
    },
    data() {
        return {
            caigouId: '',
            open: false,
            activeName: "purchase",
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            purchaseForm: [], //采购明细表单
            purchaseDataList: [], //采购明细列表
            inboundDataList: [], //入库明细列表
            paymentForm: [], //付款明细表单
            paymentDataList: [], //付款明细列表
            CS: {
                'text-align': 'center',  //文本居中
                'min-width': '250px',   //最小宽度
                'word-break': 'break-all'  //过长时自动换行
            },
            LS: {
                'color': '#000',
                'text-align': 'center',
                'font-weight': '600',
                'height': '40px',
                'min-width': '110px',
                'word-break': 'keep-all'
            },
            form: {},
            url: {
                list: '/goodsSalebuyall/goodsSalebuyall/list',
                buyid: '/lvBuy/lvBuy/'
            },
            queryParams: {
                mainId: null

            },
            queryParams2: {
                id: null

            }

        };
    },
    created() {

    },
    methods: {
        handleDetail(row) {
            this.$refs.payApplyDetail.showDetail(row.id, row.buyId);
        },
        handleDetailForShipping(row) {
            this.$refs.payApplyShippingDetail.showDetail(row.id, row.buyId);
        },
        handleClick(tab, event) {
            // 采购明细
            if (tab._props.name == 'purchase') {
                this.getPurchaseList();
            }
            // 入库信息
            if (tab._props.name == 'inbound') {
                this.getInboundList();
            }
            // 开票信息
            if (tab._props.name == 'invoice') {
                this.getInvoiceList();
            }
            // 付款信息
            if (tab._props.name == 'payment') {
                this.getPaymentList();
            }
        },
        getPaymentList() {
            var data = {
                buyId: this.queryParams2.id
            }
            getAction('/payApply/payApply/selectListByBuy', data).then(response => {
                // this.paymentForm = response.rows
                this.loading = false;
                this.paymentDataList = response.rows;
            });
        },
        getInboundList() {
            var data = {
                pageNum: 1,
                pageSize: 10000,
                caigouId: this.queryParams.mainId,
                orderByColumn: 'goods_id',
                isAsc: 'asc'
            }
            getAction('/lvRukumingxi/lvRukumingxi/list', data).then(response => {
                this.inboundDataList = response.rows
                this.loading = false;
            });
        },
        handleClose() {
            this.open = false;
        },
        openDialog(row) {
            this.queryParams.mainId = row.mainId;
            this.queryParams2.id = row.mainId;
            this.open = true;
            this.getPurchaseList();
            this.getPaymentList();
            this.getInboundList();
        },

        getPurchaseList() {
            getAction(this.url.list, this.queryParams).then(response => {

                this.purchaseDataList = response.rows
                console.log(this.form, 'datadata')
                this.getPurchaseForm();
                this.loading = false;
            });
        },
        getPurchaseForm() {
            getById(this.url.buyid, this.queryParams2.id).then(response => {
                this.purchaseForm = response.data;
                this.loading = false;
            });

        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                const values = data.map((item) => Number(item[column.property]));
                // 只合计amount1和amount3，想合并哪些列就在这里指定
                if (column.property === "shengyu" || column.property === "goodsBuyTotal" || column.property === "daohuoCount" || column.property === "shengyuDaohuoCount" || column.property === "goodsBuyPrice" || column.property === "goodsBuyDun" || column.property === "shengyuDaohuoDun" || column.property === "dun" || column.property === "applyMoney" || column.property === "applyRemain" || column.property === "daohuoDun" || column.property === "remainMoney" || column.property === "paidMoney" || column.property === "totalMoney" ) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return accAdd(prev, curr);
                        } else {
                            return prev;
                        }
                    }, 0);
                }
            });
            return sums;
        },
    }
};
</script>
